import { Button, Space, Pagination } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import AddContent from "@/components/addContent/index.tsx";
import { changeDrawerState } from "@/store/modules/themeStore";
import { useAppDispatch, useAppSelector } from "@/store/hook.ts";
import CardItem from "@/views/AccInfo/components/CardItem";
import { getMemoryInfo } from "@/api/api_memory.ts";
import { useEffect, useState } from "react";
import { changeisAddState, changeaddImgState } from "@/store/modules/assStore";

function Memory() {
  const dispatch = useAppDispatch();
  const changeDrawer = () => {
    dispatch(changeisAddState(true));
    dispatch(changeDrawerState(true));
    dispatch(changeaddImgState(1));
  };

  const update = useAppSelector((state) => state.ass.update);

  // 当前页数
  const [current, setCurrent] = useState(1);
  // 总页数
  const [total, setTotal] = useState(0);
  //CPU数据
  const [cpuData, setCpuData] = useState([]);

  const onChange = (page: number) => {
    setCurrent(page);
  };

  useEffect(() => {
    getMemoryInfo(current, 10, {}).then((res) => {
      setCpuData(res.data.result);
      setTotal(res.data.total);
    });
  }, [current, update]);

  return (
    <>
      <div style={{ overflow: "auto", height: "100%" }}>
        <div>
          <Button onClick={changeDrawer} type="primary" icon={<PlusOutlined />}>
            添加
          </Button>
        </div>

        <div style={{ marginTop: 25, marginBottom: 25 }}>
          <Space size={[14, 16]} wrap>
            {cpuData.map((item: any, index: number) => {
              return <CardItem key={index} data={item} type="Memory" />;
            })}
          </Space>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Pagination current={current} onChange={onChange} total={total} />
        </div>
        {/* 内容添加弹窗 */}
        <AddContent type="Memory" />
      </div>
    </>
  );
}

export default Memory;
